<template>
	<view class="modify-page">
		<c-layout>
			<c-navigation-bar slot="head" :title="$t('orderDetails.orderDetailsTitle')" @backEvent='backEvent()'>
			</c-navigation-bar>

			<view class="productBox">
				<view class="" v-for="(item,index) in shelfList" :key="index">
					<view class="productBox_top">
						<view class="image-box">
							<u-image :src="$u.file.getMedieUrl(item.image)" style='height: 204rpx;width: 204rpx;'></u-image>
						</view>

						<view class="min-box" style="margin-left: 12rpx;">
							<uni-tooltip :content="item.name">
								<view class="name-box" style="font-size: 28rpx;color: #1B1D29;">
									{{item.name||item.goodsName}}
								</view>
							</uni-tooltip>
							<!-- <view class="icon-box">
									<u-icon name="close" color="#616161 " size="24"></u-icon>
								</view> -->
							<uni-tooltip :content="item.intro">
								<view class="selectDetail-box" style="color: #A8A8A8;font-size: 24rpx; margin: 14rpx 0 12rpx 0;">
									{{item.intro||item.goodsDesc}}
								</view>
							</uni-tooltip>
							<view class="price-box">
								<view class="" style="font-size: 28rpx;color: #1B1D29;margin-right: 18rpx;">
									${{`${item.specificationList[0].price.toFixed(2)}`}}
								</view>


							</view>
						</view>
					</view>
					<view class="pay-mode" style="display: block;">
						<view class="titleBox">
							<view class="title">
								{{$t('product.specification')}}
							</view>

						</view>

						<view class="titleBox" style="margin: 30rpx;" v-for="(i, k) in item.specificationList" :key="k">
							<view class="">
								<view class="">
									{{i.name||i.skuName}}
								</view>
								<view class="" style="color: #A8A8A8;">
									${{i.price}}|{{$t('product.residualInventory')}} {{i.num}}
								</view>
							</view>
							<view class="titleBox">
								<u-number-box class="capsule" type="capsule" :min="minNumber" :value="i.count"
								:max="i.num"
									@change="(val)=>numberBoxChange(val,index,k)" :input-width="154" :input-height="54">
								</u-number-box>

							</view>

						</view>

					</view>


				</view>

				<view class="pay-mode">

					<view class="">
						{{$t('storeManagement.pattern')}}
					</view>
					<view class="pay-order" @click="changePayMode">
						<view class="pay-order-right">
							{{payType}}
						</view>
						<u-icon name="arrow-right" color="#999CAD" size="28"></u-icon>
					</view>
				</view>


				<view class="payment-detail-box">
					<view class="payment-detail">
						<view class="mode">
							<!-- <view class="mode-child">
								<view class="">
									商品总价
								</view>
								<view class="number-box">
									$220
								</view>
							</view> -->
							<!-- <view class="mode-child">
								<view class="">
									支付方式
								</view>
								<view class="">
									{{payType}}
								</view>
							</view> -->
							<view class="mode-child">
								<view class="">
									{{$t('anchorConsole.ShopClass')}}
								</view>
								<view class="number-box">
									{{shopLeveName}}

								</view>
							</view>
							<!-- <view class="mode-child">
								<view class="">
									折扣
								</view>
								<view class="number-box">
									8折
								</view>
							</view> -->

						</view>
						<!-- <view class="unit-box">
							<view class="unit">
								<view class="">
									支付总额
								</view>
							</view>
							<view class="total-box">
								<view class="text2">
									$
								</view>
								<view class="text3">
									80
								</view>
							</view>
							
						</view> -->
					</view>
				</view>

			</view>
			<view class="purchase-bottom">
				<view class="purchase-count">
					<view class="text5">{{$t('home.total')}}({{ totalCount }} {{$t('home.item')}})</view>
					<view class="text6">${{ totalPrice }}</view>
				</view>
				<view class="pay-btn">
					<u-button :loading="isloading" type="primary" class="custom-style"
						@click="openPassword()">{{$t('orderDetails.payment')}}</u-button>
				</view>

			</view>


		</c-layout>
		<!-- 付款方式 -->
		<u-popup v-model="show" mode="bottom" height="644rpx" border-radius="60">
			<view class="popop-box">
				<view class="popop-box1">
					<view class="">
						{{$t('storeManagement.pattern')}}
					</view>
					<u-icon name="close" @click="changePayMode"></u-icon>
				</view>
				<view class="check-box">
					<uni-data-checkbox v-model="value" :localdata="range" @change="change" :multiple="false"
						selectedColor="#1E2432" mode="list" class="check-item"></uni-data-checkbox>
				</view>
				<u-button type="primary" class="confir-btn" @click="changePayMode">{{$t('system.affirm')}}</u-button>
			</view>
		</u-popup>

		<view>

			<inputPayPassword @finish="finish" :payPwdPopShow.sync="showPassWorld" :title="pswTitle" :amount="totalPrice"
				:maxlength="6" @close="cancel">
			</inputPayPassword>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>

	</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				shopLevel: null,
				//是否能进行支付
				isPayment: true,
				isControl: true,
				//可选的支付状态
				payStatus1: null, //先款后货
				payStatus: null, //先货后款
				shopId: null,
				passWorld: '',
				maxPrice: 0,
				minNumber: uni.getStorageSync('purchaseMinNum'),
				minPrice: 0,
				shopLeveName: '',
				shopLevelId: '',
				payEarnestMoneyLevelId: '',
				payType: this.$t('storeManagement.DeliveryBeforePayment'),
				goodsData: {
					chooseOne: {
						goodId: '',
						skus: {},
						totalNum: 1,
						payType: 0,
						shopId: 0,
						password: '',
					},
					chooseMore: {
						totalNum: 1,
						payType: 0,
						shopId: 0,
						password: '',

					}
				},
				pswTitle: this.$t('storeManagement.enterPassword'),

				count: 1,
				value: 0,
				range: [],
				show: false,
				showPassWorld: false,
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
				},
				active: 0,
				needPay: 0,
				shelfList: []

			}
		},
		onLoad(options) {

			this.getShopId()
			if (Array.isArray(JSON.parse(options.item))) {
				this.shelfList = JSON.parse(options.item);
			} else {
				this.shelfList = [JSON.parse(options.item)];
			}
			console.log(this.shelfList)


			this.range = [{ "value": 0, "text": this.$t('storeManagement.DeliveryBeforePayment') }, {
				"value": 1,
				"text": this.$t(
					'storeManagement.PaymentBeforeDelivery') + ' ' + this.$t(
					'product.discount') + ':' + uni.getStorageSync('AdvancePayment') * 100 + '%'

			}]
			this.shopId = uni.getStorageSync('vuexShopId')
			this.getShopStatus()
			this.$u.get('/app/shop/getPayableEarnestMoney').then(res => {
				this.needPay = res.data
			})
		this.$u.get('/app/shop/balance').then(res => {
			uni.setStorageSync('availableBalance',res.data ? Number(res.data.availableBalance).toFixed(2) : 0)
				
		})
		},
		computed: {
			totalCount() {
				let count = 0
				this.shelfList.forEach(item => {

					item.specificationList.forEach((i) => {
						count += i.count;
					});
				})
				return count
			},
			totalPrice() {

				if (this.payType == this.$t('storeManagement.PaymentBeforeDelivery')) {
					let count = 0
					this.shelfList.forEach(item => {

						item.specificationList.forEach((i) => {
							count += i.count * i.price;
						});
					})
					count = count * uni.getStorageSync('AdvancePayment')
					return count.toFixed(2)
				} else {
					let count = 0
					this.shelfList.forEach(item => {

						item.specificationList.forEach((i) => {
							count += i.count * i.price;
						});
					})
					return count.toFixed(2)
				}
			},
		},
		methods: {
			backEvent() {
				let pages = getCurrentPages() // 获取栈实例
				let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
				let prevPage = pages[pages.length - 2] // 获取上个页面的数据，包含页面
				if (prevPage.route == 'pages/storyType/storeManagement/purchaseCart') {
					uni.reLaunch({
						url: '/pages/storyType/storeManagement/purchaseCart'
					})
				} else {
					uni.reLaunch({
						url:'/'+ prevPage.route
					})
				}

			},

			//获取店铺信息
			getShopStatus() {
				this.$u.get(`/app/shop/get/${this.shopId}`).then(res => {
					this.payStatus1 = res.data.cashBeforeDelivery //先款后货
					this.payStatus = res.data.deliveryBeforeCash
					//判断店铺支持的付款方式
					if (this.payStatus1 != 1 && this.payStatus == 1) {
						this.isControl = false

					} else if (this.payStatus1 == 1 && this.payStatus != 1) {

						this.isControl = false
						this.payType = this.$t('storeManagement.PaymentBeforeDelivery')
						this.goodsData.chooseOne.payType = 1
						this.goodsData.chooseMore.payType = 1
					} else if (this.payStatus1 != 1 && this.payStatus != 1) {

						this.payType = this.$t('storeManagement.NoPurchasingAuthority')
						this.isControl = false
						this.isPayment = false
					} else {

					}
					let index = res.data.shopLevelId

				})

			},
			showToast(title) {
				this.$refs.uToast.show({
					title: title,
					type: 'default',
				})
			},
			// confirm(){

			// 	this.goodsData.chooseMore.password=this.passWorld
			// 	this.goodsData.chooseOne.password=this.passWorld
			// 	if(this.shelfList.length===1 && this.goodsData.chooseOne.skuId){
			// 		this.$u.post(`/app/shopPurchaseInfo/add`, this.goodsData.chooseOne).then((res) => {
			// 		this.showToast(res.msg)

			// 			});
			// 	}else{
			// 		this.$u.post(`/app/shopPurchaseInfo/add`, this.goodsData.chooseMore).then((res) => {
			// 		this.showToast(res.msg)

			// 			});
			// 	}
			// },

			cancel() {
				this.showPassWorld = false
				this.isloading = false
			},
			finish(e) {
				let pages = getCurrentPages() // 获取栈实例
				let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
				let prevPage = pages[pages.length - 2] // 获取上个页面的数据，包含页面

				console.log(prevPage.route)
				this.goodsData.chooseOne.password = e

				let arr = []
				this.shelfList.forEach(k => {
					k.specificationList.forEach(i => {
						arr.push({ skuId: i.id, num: i.count })
						this.goodsData.chooseOne.goodId = i.spuId
					})
				})
				this.goodsData.chooseOne.skus = arr
				this.$u.post(`/app/shopPurchaseInfo/add`, this.goodsData.chooseOne).then((res) => {
					this.showToast(this.$t('storeManagement.PurchaseSuccessfullyTips'))
					if (res.code == 200) {
						this.isloading = false
					}
					setTimeout(() => {
						if (prevPage.route == 'pages/storyType/storeManagement/myWarehouse') {
							uni.reLaunch({
								url: '/pages/storyType/storeManagement/myWarehouse'
							})
						} else {
							uni.reLaunch({
								url: '/pages/storyType/storeManagement/commodity'
							})
						}

					}, 1500)
				});
			},

			getShopId() {
				this.$u.get(`/app/shop`).then((r) => {
					this.shopLeveName = r.data.shopLevel
					this.shopLevelId = r.data.shopLevelId
					this.payEarnestMoneyLevelId = r.data.payEarnestMoneyLevelId
					this.goodsData.chooseMore.shopId = Number(r.data.id)
					this.goodsData.chooseOne.shopId = Number(r.data.id)
				});
			},

			//选择几件
			numberBoxChange(val, index,k) {
				this.$set(this.shelfList[index].specificationList[k], 'count', val.value);

			},



			change(e) {

				this.goodsData.chooseOne.payType = e.detail.value
				this.goodsData.chooseMore.payType = e.detail.value
				if (e.detail.value) {
					this.payType = this.$t('storeManagement.PaymentBeforeDelivery')
				} else {
					this.payType = this.$t('storeManagement.DeliveryBeforePayment')
				}

			},
			changePayMode() {

				if (this.isControl) {
					this.show = !this.show
				}

			},
			openPassword() {
				if (this.totalPrice < uni.getStorageSync('purchaseMinAmount') || this.totalPrice > uni.getStorageSync(
						'purchaseMaxAmount')) {
					this.$u.toast(this.$t('storeManagement.amoutError') + this.$t('storeManagement.MinimumPurchaseAmount') + uni
						.getStorageSync('purchaseMinAmount') + ',' + this.$t('storeManagement.MaximumPurchaseAmount') + uni
						.getStorageSync('purchaseMaxAmount'))
					return
				}
				if (this.needPay != 0) {
					this.$u.toast(this.$t('storeManagement.underMargin'))

					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/storyType/storeManagement/storedeposit'
						})
					}, 1500)
					return
				}

				if (!this.isPayment) {
					this.$u.toast(this.$t('storeManagement.NoPurchasingAuthority'))
					return
				}
				if (this.totalPrice>Number(uni.getStorageSync('availableBalance'))&&this.goodsData.chooseMore.payType==1) {
					this.$u.toast(this.$t('recharge.StoreBalanceError'))
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/storyType/storeManagement/withdrawal?type=0&rechargeType=1'
						})
					}, 1500)
					return
				}
				this.isloading = true
				this.showPassWorld = true
			}
		},



	}
</script>

<style lang="scss" scoped>
	/deep/.uni-tooltip-popup {
		color: #c9c9c9;
		background: #f5f6f8;
		max-height: 400rpx;
		overflow: auto;
	}

	/deep/ .c-navigation-bar {
		border-bottom: 22rpx solid #ffffff !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--list {
		padding: 30rpx 30rpx;
	}

	.titleBox {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: 30rpx;
			color: #000000;
		}

		.btn {
			width: 44rpx;
			height: 44rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 50%;
			border: 1px solid #000;
		}
	}

	.passWorld-box {

		display: flex;
		justify-content: center;
		align-items: center;


		.passWorld {
			margin: 30rpx 0;
			// z-index: 999;
			// position: fixed;
			// top: 50%;
		}
	}


	.popop-box {
		padding: 74rpx 50rpx;

		.popop-box1 {
			display: flex;
			justify-content: space-between;

		}

		.check-box {
			margin: 74rpx 0;

			.check-item {
				.check-item {
					margin-bottom: 60rpx;

				}
			}
		}

		.confir-btn {
			width: 670rpx;
			height: 120rpx;
			background: #2934D0;
		}
	}

	.modify-page {
		background: #1B1D29;

		.tabs {

			height: 68rpx;
			background: rgba(0, 0, 0, 0.0287);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			opacity: 1;
			width: 539rpx;
			display: flex;
			align-items: center;
			margin: 58rpx auto;
			padding: 0 8rpx;

			.tabs_aside {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
				font-weight: 400;
				color: #A5A5A5;


			}

			.active {
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				height: 56rpx;
				line-height: 56rpx;
				color: #3B2BE4;
			}
		}

		.productBox {
		    border-radius: 0px 0px 31px 31px;
		    overflow: auto;
				background-color: #fff;
		    position: absolute;
		    top: 0;
		    width: 100%;
		    bottom: 170rpx;

			.productBox_top {
				display: flex;
				padding-bottom: 10px;
				align-items: center;
				padding: 20rpx 40rpx;
				border-bottom: 4px solid #EEEEEE;

				.image-box {
					border-radius: 26rpx;
					overflow: hidden;
				}

				.min-box {

					width: 400rpx;
					padding-left: 20rpx;

					.name-box {
						font-size: 30rpx;
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}

					.selectDetail-box {
						font-size: 24rpx;
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.price-box {
						display: flex;

						&:nth-child(1) {
							margin-right: 30rpx;
						}
					}
				}

			}

			.productBox_bottom {
				margin-top: 8px;
				// display: flex;
				align-content: space-between;
				border-bottom: 4px solid #EEEEEE;


				.unit-box {
					margin: 36rpx 40rpx 40rpx 40rpx;

					.unit {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;
					}

					.total-box {
						display: flex;
						justify-content: end;
						align-items: center;

						.text1 {
							font-size: 24rpx;
							color: #A8A8A8;
						}

						.text3 {
							font-weight: 400;
							font-size: 36rpx;
							color: #F26163;
						}

						.text2 {
							font-weight: 400;
							color: #F26163;
						}
					}
				}

			}


			.pay-mode {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 36rpx 40rpx 40rpx 40rpx;
				border-bottom: 4px solid #EEEEEE;


				.pay-order {
					display: flex;

					.pay-order-right {
						margin-right: 24rpx;
					}
				}

				.mode {
					display: flex;
					justify-content: space-between;
					align-items: center;

					width: 100%;

					.number-box {
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.payment-detail-box {}

		.payment-detail {
			// margin-top: 8px;
			// display: flex;
			background: #FFFFFF;
			align-content: space-between;

			.mode {
				margin: 0rpx 40rpx;
				border-bottom: 1rpx solid #E1E8E8;
				padding: 24rpx 24rpx 24rpx 0;

				.mode-child {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 24rpx 0rpx;
				}
			}

			.unit-box {
				padding: 36rpx 40rpx 40rpx 40rpx;
				display: flex;
				justify-content: space-between;

				.unit {
					display: flex;
					justify-content: space-between;

				}

				.total-box {
					display: flex;
					justify-content: end;
					align-items: center;
					padding-bottom: 282rpx;

					.text1 {
						font-size: 24rpx;
						color: #A8A8A8;
					}

					.text3,
					.text2 {
						font-weight: 400;
						font-size: 32rpx;
						color: #F26163;
					}

				}
			}

		}


		.replenishenmentBtn {
			height: 52rpx;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #2934D0;
			line-height: 52rpx;
			color: #2934D0;
			width: 230rpx;
			text-align: center;
		}

		.lowerShelfBtn {
			height: 52rpx;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #2934D0;
			line-height: 52rpx;
			background: #2934D0;
			color: #fff;
			width: 230rpx;
			text-align: center;
			margin: 0 16rpx;
		}

		.purchase-bottom {
			display: flex;
			flex-wrap: wrap;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			justify-content: space-between;
			background-color: #1B1D29;
			padding: 32rpx 44rpx 52rpx 50rpx;
			max-height: 180rpx;
		
			.text5 {
				color: #91909A;
				font-size: 28rpx;
			}

			.text6 {
				color: #91909A;
				font-size: 32rpx;
				font-weight: 400;

			}

			.pay-btn {}

			.custom-style {
				width: 200rpx;
				height: 80rpx;
				background: #2934D0;
				border-radius: 20rpx;

			}

		}

	}
</style>